<template>
	<view class="box bg-f7">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" :scrollable='false' 
					@click="tabsClick"
					lineHeight='4rpx' lineWidth='40rpx'
					lineColor='#000'
					:activeStyle="{
			            color: '#000',
			            fontWeight: 'bold', 
			        }" :inactiveStyle="{
			            color: '#4d4d4d', 
			        }"></u-tabs>
		</u-sticky>
		<view class="padding-30">
			<view v-for="item in couponList" class="bg-white z-0 item-box padding-l-r-30 margin-b-20 border-radio-14">
				<view class="item-info align-items-center">
					<view class="flex-1">
						<view class="item-name fs-30 color-0 margin-b-10">
							{{item.coupon.name}}
						</view>
						<view class="fs-24 color-333">
							有效期： {{timestampToDateTime(item.end_time) }}
						</view>
					</view>
					<view class="fs-26 color-0">
						<text class="fs-60 margin-r-10">{{item.coupon.price}}</text>元
					</view>
				</view>
				<view class="solid"></view>
				<view class="rule-box align-items-center">
					<text class="fs-24 color-80">使用规则</text>
					<image :class="{'rule-show' :item.isRuleShow}" @click="item.isRuleShow=!item.isRuleShow" src="/static/image/mine/right.png" mode="widthFix" ></image>
					<view class="flex-1"></view>
					<view class='user-btn' v-if="item.status ==0" @click="goShop">
						去使用
					</view>
					<view class=' user-btn user-other-btn' v-else-if="item.status ==1">
						已使用
					</view>
					<view class=' user-btn user-other-btn' v-else>
						已过期
					</view>
				</view>
				<view class="fs-24 color-80 padding-t-b-30" v-show="item.isRuleShow">{{item.coupon.content}}</view>
				<view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import {couponList} from '@/api/coupon'
	export default {
		data() {
			return {
				list: [{
						name: "未使用",
                        id:0
					},
					{
						name: "已使用",
                        id:1
					},
					{
						name: "已过期",
                        id:2
					},
				],
				couponList:[ ],
                isMore:false,
                page:1,
                status:0
			}
		},
        onLoad() {
			this.init()
		},

        //上拉加载函数
        onReachBottom() {
            if (this.isMore) {
                setTimeout(() => {
                    this.getList()
                }, 100)
            } else {
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh() {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function() {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            init(){
                this.page = 1
                this.couponList = []
                this.getList()
			},
            getList(){
                let arr = []
                couponList({page:this.page,limit:10,status:this.status}).then(res=>{
                    arr=res.data
                    arr.map(item=>{
                        item.isRuleShow =false
                    })
                    this.couponList = this.couponList.concat(arr)
                    if (res.data && res.data.length > 9) {
                        this.isMore = true
                        this.page++
                    } else {
                        this.isMore = false
                    }
                })
            },
			goShop(){
				uni.navigateTo({
					url:'/pageA/shop/shop'
				})
			},
			tabsClick(e){
                this.status = e.id
                this.init()
			},
            timestampToDateTime(timestamp) {
                let val = '无'
                if(timestamp){
                    // 创建一个 Date 对象，传入时间戳（毫秒）
                    const date = new Date(timestamp);

                    // 获取年、月、日、时、分、秒
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
                    const day = String(date.getDate()).padStart(2, '0');
                    const hours = String(date.getHours()).padStart(2, '0');
                    const minutes = String(date.getMinutes()).padStart(2, '0');
                    const seconds = String(date.getSeconds()).padStart(2, '0');

                    // 返回格式化后的字符串
                    val =`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }

                return val
            }
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {  
		&::before ,&::after{
			content: '';
			position: absolute;
			top: 130rpx;
			left: 0;
			width: 20rpx;
			height: 20rpx;
			background-color: #f7f7f7;
			z-index: 1;
			border-radius: 50%;
			transform: translate(-50%,-50%);
		}
		&::after{
			left: auto;
			right: 0;
			transform: translate(50%,-50%);
		}
	}
	.item-info { 
		height: 130rpx;
	}
	.rule-box {
		height: 70rpx;
		image {
			width: 22rpx;
			margin-left: 12rpx;
		}
		.user-btn {
			width: 110rpx;
			height: 46rpx;
			background: #43ABC4;
			border-radius: 23rpx;
			text-align: center;
			color: #fff;
			line-height: 46rpx;
			font-size: 24rpx;
			&.user-other-btn {
					color: #808080;
					background-color: #F0F0F0;
			}
		}
		.rule-show {
			transform: rotate(-90deg);
		}
	}
</style>